<template>
  <div :style="{ width: '100%', height: '100%' }" class="bg">
    <div class="login-box">
      <a-form
        ref="ruleForm"
        id="components-form-demo-normal-login"
        :model="form"
        :rules="rules"
      >
        <a-form-item ref="name" name="name">
          <a-input v-model:value="form.name" allow-clear placeholder="user">
          </a-input>
        </a-form-item>
        <a-form-item has-feedback ref="password" name="password">
          <a-input-password
            v-model:value="form.password"
            allow-clear
            placeholder="password"
          >
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-checkbox v-model="form.check" style="color: white">
            Remember me
          </a-checkbox>
          <a class="login-form-forgot" href=""> Forgot password </a>
          <a-button
            type="primary"
            @click.prevent="onSubmit"
            class="login-form-button"
          >
            Log in
          </a-button>
          <span style="color: white">Or</span>
          <a href=""> register now! </a>
          <a-button
            class="reset"
            type="primary"
            size="small"
            @click.prevent="resetForm"
          >
            reset
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
import { useForm } from "./login";
export default {
  setup() {
    const { form, rule, onSubmit, resetForm, ruleForm } = useForm();
    return {
      form,
      rule,
      onSubmit,
      resetForm,
      ruleForm,
    };
  },
};
</script>
<style lang="scss">
.login-box {
  position: absolute;
  height: 40%;
  width: 30%;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  #components-form-demo-normal-login .login-form-forgot,
  .reset {
    float: right;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }
}
.bg {
  background-image: url("/a.jpg");
  position: fixed;
  background-size: cover;
}
.login-form-button {
  margin-bottom: 10px;
}
</style>
